<template>
  <div class="container analy">
    <Header />
    <div class="main">
      <h2>{{$t("analy.title")}}</h2>
      <div class="info">
        <ol>
          <li>
            <i class="greenbg"></i>
            <span>{{$t("analy.high")}}</span>
          </li>
          <li>
            <i class="redbg"></i>
            <span>{{$t("analy.low")}}</span>
          </li>
        </ol>
        <ul>
          <li>
            <img src="../../assets/img/eg1.png" alt="">
            <div>
              <span>{{$t("analy.hint")}}</span>
              <div>
                <p v-for="(item,index) in eg1" :key="index" :style="{color:item<2?'#FE624E':'#3BECBC'}">
                  {{item}}<span v-if="index!==eg1.length-1" style="color:#7EA1BD;margin: 0 .03rem;">→</span>
                </p>
              </div>
            </div>
          </li>
          <li>
            <img src="../../assets/img/eg2.png" alt="">
            <div>
              <span>{{$t("analy.hint")}}</span>
              <div>
                <p v-for="(item,index) in eg2" :key="index" :style="{color:item<2?'#FE624E':'#3BECBC'}">
                  {{item}}<span v-if="index!==eg2.length-1" style="color:#7EA1BD;margin: 0 .03rem;">→</span>
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
export default {
  components:{
    Header
  },
  data(){
    return{
      eg1:[15.23,3.64,4.15,1.64,5.64,2.64],
      eg2:[5.64,5.64,5.64,5.64,5.64,5.64,5.64,1.64,1.44,5.64]
    }
  }
}
</script>

<style lang="scss" scoped>
.analy{
  .main{
    h2{
      font-size: .16rem;
      font-weight: bold;
      padding: 0 .15rem;
    }
    .info{
      background: #283E4F;
      border-radius: .03rem;
      padding: .15rem;
      margin: .15rem;
      >ol{
        display: flex;
        justify-content: space-around;
        font-size: .12rem;
        margin: .1rem 0;
        i{
          height: .09rem;
          width: .09rem;
          display: inline-block;
          border-radius: 50%;
          margin-right: .06rem;
        }
        i.redbg {
          background: linear-gradient(to bottom, #ff092c 0%, #ff617b 100%);
        }
        i.greenbg {
          background: linear-gradient(to bottom, #24ffaf 0%, #92ffe7 100%);
        }
      }
      >ul{
        margin-top: .2rem;
        li{
          background: #112331;
          padding: .08rem;
          display: flex;
          font-size: .12rem;
          margin: .25rem 0;
          img{
            height: 1.2rem;
            width: 1.2rem;
            margin-right: .06rem;
          }
          >div{
            max-width: 1.6rem;
            padding: .06rem 0;
            >span{
              display: block;
              margin-bottom: .1rem;
            }
            >div{
              display: flex;
              flex-wrap: wrap;
              margin-top: .1rem;
              line-height: 1.8;
            }
          }
        }
      }
    }
  }
}
</style>